<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<template v-for="(v,i) in headList" :key="i">
				<view @click="changeHeader(i)" :class="i==currentIndex?'check':''">{{v}}</view>
			</template>
		</view>
		<swiper class="body" :current="currentIndex" @change="changeCurrent">
			<swiper-item v-for="(v,i) in headList" :key="i">
				<view class="body_box">
					<view class="not_oders">
						<view v-if="showOrderList.length>0">
							<view v-for="item in showOrderList">
								<uni-card>
									<template #title>
										<view class="orderTitle">
											<view>{{item.userList[0].gname}}</view>
											<view class="orderSn">订单号：{{item.SN}}</view>
										</view>
									</template>
									<view v-for="itemSon in item.userList" class="orderContent">
										<view>{{itemSon.gname}}-{{itemSon.name}}（{{itemSon.username}}）</view><view>×1</view>
									</view>
									<view class="orderContentBottom">
										<view></view>
										<view class="price">￥{{item.amount}}</view>
									</view>
									<view slot="actions" >
										
										<view class="orderBottom">
											<view>
												<text class="orderStatus">
													<!--  1.未支付 2.未使用 3.已使用 4.已退款 5 已作废 -->
													{{orderStatusArr[item.status-1]}}
												</text> <text class="orderBtn">再来一单</text>
											</view>
										</view>
									</view>
								</uni-card>
							</view>
						</view>
						<view v-else class="text" style="margin-top: 50%;">
							暂无订单记录
						</view>
					</view>

				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		getOrderList
	} from "@/api/order.js"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	const tid = ref()
	onLoad((option) => {
		tid.value = option.tid
	})
	//  1.未支付 2.未使用 3.已使用 4.已退款 5 已作废
	let orderStatusArr = ['未支付','未使用','已使用','已退款','已作废']
	// 全部
	const orderAll = ref([])
	const showOrderList = ref([])
	onShow(() => {
		getOrderListFn()
	})
	const orderType = ref(1)
	const getOrderListFn = ()=>{
		getOrderList({
			tid: tid.value,
			type: orderType.value,
			page: 1
		}).then(e => {
			console.log(e, 41)
			// 拿到订单列表的所有数据 
			orderAll.value = e.data.list
			showOrderList.value = e.data.list
		})
	}
	const currentIndex = ref(0)
	const headList = ref(['全部', '待支付', '待使用', '取消/退款'])

	function changeHeader(num) {
		currentIndex.value = num
	}

	// 滑动
	function changeCurrent(e) {
		console.log(e,94)
		// console.log(e.detail.current)
		// 全部
		orderType.value = e.detail.current+1
		currentIndex.value = e.detail.current
		getOrderListFn()
		
	}
</script>

<style lang="less" scoped>
	.container {
		display: flex;
		flex-direction: column;

		.header {
			width: 100%;
			height: 100rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #f8f8f8;
			box-sizing: border-box;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: gray;

			view {
				line-height: 70rpx;
				border-bottom: 6rpx solid rgba(0, 0, 0, 0);
			}

			.check {
				font-weight: 600;
				color: orangered;
				border-color: orangered;
			}
		}

		.body {
			width: 100%;
			flex: 1;

			swiper-item,
			.body_box {
				width: 100%;
				height: 100%;
				overflow: auto;

				.not_oders {
					width: 100%;
					text-align: center;
				
					color: #c0c4cc;

					.iconfont {
						font-size: 150rpx;
					}

					.text {
						margin-top: 20rpx;
					}
				}

			}
		}
	}
	
	.orderTitle{
		display: flex;
		justify-content: space-between;
		padding:10rpx;
		color: #000;
		border-bottom: 1px solid #c0c4cc;
		font-weight: bold;
	}
	.orderSn{
		font-size: 24rpx;
	}
	.orderContent{
		text-align: left;
		color: #000;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
	}
	.orderContentBottom{
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		font-weight: bold;
		color: red;
	}
	.orderBottom{
		display: flex;
		justify-content: flex-end;
		padding-bottom: 30rpx;
		
	}
	.orderBtn{
		background: none;
		border: 1px solid coral;
		padding: 5rpx 20rpx;
		border-radius: 20rpx;
		color: coral;
	}
	.orderStatus{
		color: #000;
		margin-right: 10rpx;
	}
</style>